<template>
  <div class="contract-discount">
    <van-form ref="discountForm" @submit="formSubmited">
      <van-field
        v-model="form.agentDiscountRate"
        name="agentDiscountRate"
        label="代理商折扣比例(%)"
        placeholder="请输入"
        :rules="[{ validator: agentDIscountRateVali, message: '代理商折扣比例需在0~100' }]"
      />
    </van-form>
    <van-row type="flex" justify="center">
      <van-col :span="12">
        <van-button round block type="info" native-type="button" @click="okBtnClick">确定</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Form, Field, Row, Col, Button, Toast } from "vant";
import { mapActions } from "vuex";
export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Row.name]: Row,
    [Col.name]: Col,
    [Button.name]: Button
  },
  data() {
    return {
      form: {
        agentDiscountRate: ""
      }
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    ...mapActions({ editDiscount: "contract/editDiscount" }),
    initData() {
      this.form.agentDiscountRate = this.$store.state.contract.docsDetail.agentDiscountRate;
    },
    agentDIscountRateVali(val) {
      return val ? val >= 0 && val <= 100 : false;
    },
    okBtnClick() {
      this.$refs.discountForm.submit();
    },
    formSubmited() {
      this.editDiscount({
        agentDiscountRate: this.form.agentDiscountRate,
        id: this.$store.state.contract.docsDetail.id
      })
        .then(res => {
          console.log(res);
          if (res.success) {
            Toast.success("修改成功");
            this.$emit('refresh')
          } else {
            Toast.fail("修改失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>